import React from 'react';
import Icon from '../../Icon';
import './SearchHeader.css';

const SearchHeader = ({
  title = "软件著作权",
  titleIcon = "default",
  searchPlaceholder = "搜索标题、作者...",
  searchTerm = "",
  totalCount = 0,
  onSearchChange = () => {},
  onNew = null,
  onColumns = null,
  onFilter = null,
  showNew = true,
  showColumns = true,
  showFilter = true
}) => {
  return (
    <div className="data-table__search">
      <div className="data-table__search-left">
        <div className="data-table__title">
          <div className="data-table__title-icon">
            <Icon name={titleIcon} size={20} />
          </div>
          <span className="data-table__title-text">{title}</span>
        </div>
      </div>
      
      <div className="data-table__search-center">
        <div className="data-table__search-input">
          <div className="data-table__search-icon">
            <Icon name="search" size={16} />
          </div>
          <input
            type="text"
            placeholder={searchPlaceholder}
            value={searchTerm}
            onChange={(e) => onSearchChange(e.target.value)}
            className="data-table__search-field"
          />
        </div>
        
        <div className="data-table__count">
          共{totalCount}项
        </div>
      </div>
      
      <div className="data-table__search-right">
        {showNew && onNew && (
          <button className="data-table__btn data-table__btn--new" onClick={onNew}>
            <span className="data-table__btn-icon">+</span>
            新建
          </button>
        )}
        {showColumns && onColumns && (
          <button className="data-table__btn data-table__btn--filter" onClick={onColumns}>
            <span className="data-table__btn-icon">≡</span>
            显示列
          </button>
        )}
        {showFilter && onFilter && (
          <button className="data-table__btn data-table__btn--filter" onClick={onFilter}>
            <span className="data-table__btn-icon">▽</span>
            筛选
          </button>
        )}
      </div>
    </div>
  );
};

export default SearchHeader;
